<template>
  <div>
    <div class="mg-content">
      <el-row :gutter="24">
        <el-col :span="9">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">总部仓库</div>
            <el-select size="medium" v-model="supplier" filterable placeholder="请选择总部仓库" style="width:100%;">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="9">
          <el-input size="medium" v-model="input"  @keyup.enter.native="keyDown($event)" placeholder="请输入原料名称" style="width:100%">
            <template slot="prepend">
              <el-button>原料名称</el-button>
            </template>
          </el-input>
        </el-col>


      </el-row>
      <el-row :gutter="24" style="margin-top: 15px;">
        <el-col :span="9" >
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">原料类别</div>
            <el-select size="medium" v-model="supplier" filterable placeholder="请选择原料类别" style="width:100%;">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="9"   >
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">预警状态</div>
            <el-select size="medium" v-model="supplier" filterable placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6"  style="padding-right: 0px;padding-left: 0px;">
          <el-button size="medium" class="btn-info"  icon="el-icon-search" @click="search(1)">搜索</el-button>
          <el-button size="medium" class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="clearSearch">重置</el-button>
        </el-col>
      </el-row>

      <div class="title-buttons">
        <el-button  class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">导出&nbsp;</el-button>
      </div>
      <el-row :gutter="20">
        <!--<el-col :span="4">-->
        <!--<div class="me_title"  >原料分类</div>-->
        <!--<el-tree :data="treeData"  :props="defaultProps" style="height:400px;overflow-y:auto" :highlight-current="true" :expand-on-click-node="true" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>-->
        <!--</el-col>-->
        <el-col :span="24">
          <el-table
            v-loading="loading"
            :data="tableData"
            :border="true"
            style="width: 100%">
            <el-table-column
              label="仓库">
              <template  slot-scope="scope">
                <span>{{scope.row.no}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="原料类别">
              <template  slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="原料编码">
              <template  slot-scope="scope">
                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="原料名称">
              <template  slot-scope="scope">
                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="规格型号">
              <template  slot-scope="scope">
                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
            label="库存单位">
            <template  slot-scope="scope">
              <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
              <span v-else>----</span>
            </template>
          </el-table-column>
            <el-table-column
              label="库存数">
              <template  slot-scope="scope">
                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="库存预警">
              <template  slot-scope="scope">
                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="库存金额">
              <template  slot-scope="scope">
                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--label="查看" width="70">-->
            <!--<template  slot-scope="scope">-->
            <!--<router-link :to="'/materialCategorys/materials/show?id='+scope.row.id">-->
            <!--<span class="icon icon-chakanmingxi table-icon"></span>-->
            <!--</router-link>-->
            <!--</template>-->
            <!--</el-table-column>-->
          </el-table>
        </el-col>
      </el-row>
      <br>
      <!--<div class="block">-->
        <!--<el-row>-->
          <!--<el-col :span="24" class="text-right">-->
            <!--<el-pagination-->
              <!--@size-change="handleSizeChange"-->
              <!--@current-change="handleCurrentChange"-->
              <!--:current-page="currentPage"-->
              <!--:page-sizes="pageSizes"-->
              <!--:page-size="pageSize"-->
              <!--layout="total, sizes, prev, pager, next, jumper"-->
              <!--:total="total">-->
            <!--</el-pagination>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</div>-->
    </div>
    <PluginConfirm
      :show="dialogIsShow"
      @chooseSure="chooseSure()"
      @chooseCancel="chooseCancel()"
      @dialogResult="dialogResult">
    </PluginConfirm>
  </div>
</template>
<script>
  //注意路径
  export default{
    data(){
      return {
        treeData:[],
        defaultProps: {
          children: 'children',
          label:function(data){
            return "["+data.no+"]"+data.name;
          }
        },
        loading:false,
        tableData: [],
        pageSizes:window.pageSizes,//所有可选择的条数
        pageSize:window.pageSize,//控制一页显示的条数
        total:10,//总条数
        input:"",
        currentPage:1,
        inputValue:"",
        dialogIsShow:false,
        addShow:false,
        activityId:"",
        dialogIsShow:false,
        curDataRow:null,
        curDataIndex:0,
        selectItmeIndex:"",
        selectItemDetailsIndex:"",
        selectDelId:""

      }
    },
    created(){
      window.this = this;
      this.initData();
    },
    methods: {
      handleNodeClick(data) {
        var id=data.id;
        var cate="";
        if(id!=0){
          cate=id;
        }else{
          cate="";
        }
        this.loading=true;
        this.$axios.get("materials/materialCategorys?search.category.id_eq=" + cate +"&page.pn=1&page.size=" + this.pageSize).then((data)=>{
          if(data.status==200){
            this.tableData=data.content.content;//TODO
            this.total=data.content.totalElements
            this.loading=false
          }else{
            this.loading=false
          }
        })
      },
      initData(){
        this.currentPage=1;
        this.getData();
      },
      keyDown(ev){
        if(ev.keyCode==13) {
          this.currentPage=1;
          this.inputValue=this.input;
          this.getData();
        }
      },
      cleanSearch(){
        this.currentPage=1;
        this.input="";
        this.inputValue=this.input;
        this.getData();
      },
      search(){
        this.currentPage=1;
        this.inputValue=this.input;
        this.getData();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.getData();
      },
      getData(){
        // this.loading=true;
        this.$axios.get("materials/materialCategorys?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue).then((data)=>{
          this.loading=false
          this.treeData=data.content.treeData
          this.tableData=data.content.content;
          this.total=data.content.totalElements
        }).catch(function(err){
        })
      },
      handleDelete(index,delIndex,id) {
        this.selectItmeIndex=index,
          this.selectItemDetailsIndex=delIndex;
        this.selectDelId=id;
        this.dialogIsShow=true;
      },
      dialogResult(param){
        this.dialogIsShow=param.close;
        if(param.choose==="ok"){
          //console.log("确定");
          this.$axios.delete("materials/materialCategorys/"+this.selectDelId).then(data=>{
            if(data.status==200){
              this.tableData.splice(this.curDataIndex,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }else{
              this.$message({
                type: 'error',
                message: data.message
              });
            }
          })
        }else if(param.choose==="cancel"){
          //console.log("取消");
        }else{
          //console.log("不做处理");
        }
      },

      addSuccess(item){
        this.addShow=false;
        this.currentPage=1;
        this.initData();
      },

      addClose(){
        this.addShow=false;
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.getData();
      },
    }
  }
</script>
<style scoped>
</style>
